<template>
  <div class="management">
    <div class="common-content t-content">
      <!--查询栏-->
      <div class="search-top-bar">
        <div class="search">
          <el-form size="small" :model="searchData" inline>
            <el-form-item label="">
              <el-select
                  placeholder="请选择所属组"
                  v-model="searchData.groupId"
                  @change="getList()"
                  clearable>
                <el-option
                    v-for="item in groupOptions"
                    :key="item.id"
                    :label="item.groupName"
                    :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-select
                  placeholder="请选择在线状态"
                  v-model="searchData.resOnline"
                  @change="getList()"
                  clearable>
                <el-option label="在线" value="0"></el-option>
                <el-option label="离线" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-select
                  placeholder="请选择资源类型"
                  v-model="searchData.resType"
                  @change="getList()"
                  clearable>
                <el-option label="服务器资源" value="0"></el-option>
                <el-option label="硬件资源" value="1"></el-option>
                <el-option label="其他" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="resOptsys">
              <el-select
                  v-model="searchData.resOptsys"
                  placeholder="请选择使用系统"
                  @change="getList()"
                  clearable>
                <el-option
                    v-for="item in systemOptions"
                    :key="item.id"
                    :label="item.systemName"
                    :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="resName">
              <el-input
                  style="width: 150px"
                  v-model="searchData.resName"
                  clearable
                  placeholder="资源名称" @input="searchKey"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="small" icon="el-icon-plus" @click="addRe" v-if="auth&&auth.add">新增资源
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <!--列表-->
      <Table
          ref="table"
          :table-header="tableHeader"
          :tableData="tableData"
          :pg-total-num="total"
          :max-height="tableMaxHeight"
          @handleSizeChange="handleSizeChange"
          @handleCurrentChange="handleCurrentChange">
        <div slot="operation" slot-scope="row">
          <i class="el-icon-edit table-btn"
             @click="edi(row.data)"
             title="编辑"
             v-if="auth&&auth.edit"></i>
          <i class="el-icon-delete del table-btn"
             @click="del(row.data)"
             title="删除"
             v-if="auth&&auth.del"></i>
        </div>

        <div slot="resOnline" slot-scope="row" style="line-height: 1;">
          <el-tag v-if="parseInt(row.data.resOnline)===0" type="success" size="mini" effect="dark">在线</el-tag>
          <el-tag v-else type="danger" size="mini" effect="dark">离线</el-tag>
        </div>

        <div slot="resIdleRate" slot-scope="row" style="line-height: 1;">
          <el-progress
              :text-inside="true"
              :stroke-width="16"
              :percentage="parseFloat(row.data.resIdleRate)"
              :color="['#d14e60','#e6a23c','#2cbc74']"></el-progress>
        </div>
      </Table>
    </div>

    <!--新增编辑-->
    <UpdateDialog ref="updateDialog" @success="successBack"></UpdateDialog>
  </div>
</template>

<script>
import Table from "@/components/Table";
import {
  get_getResourceByPage,
  get_getResourceGroup,
  put_putResource,
  put_delResource,
  put_editResource,
} from "../../../apis/resource/resource";
import {get_getSystem} from "@/apis/assembly/assembly";
import {get_VendorList} from "../../../apis/user/userApi";
import Dialog from "@/components/Dialog/Dialog.vue";
import {debounce} from '@/utils'
import UpdateDialog from './comp/update-dialog'

export default {
  components: {Table, Dialog, UpdateDialog},
  data() {
    return {
      auth: null,
      tableMaxHeight: '',
      // 分页
      pageSize: 10,
      pageNum: 1,
      total: 0,
      searchData: {
        resName: "",
        groupId: "",
        resOnline: "",
        resOptsys: "",
        resType: ""
      },
      tableHeader: [
        {prop: "resName", name: "资源名称", minWidth: 120},
        {prop: "resTypeName", name: "资源类型", width: 120},
        {prop: "systemName", name: "操作系统", width: 100},
        {prop: "vendorName", name: "资源分配厂家", width: 120},
        {prop: "groupName", name: "所属分组", width: 120},
        {prop: "resOnline", name: "在线状态", width: 100, tag: true},
        {prop: "resIdleRate", name: "空闲率百分比", minWidth: 120, tag: true},
        {prop: "userName", name: "创建人", width: 100},
        {prop: "addTime", name: "新增时间", width: 140},
        {prop: "editTime", name: "修改时间", width: 140},
        {prop: "remarks", name: "备注", minWidth: 100},
        {prop: "operation", name: "操作", width: 100, slot: true}
      ],
      // 列表
      tableData: [],
      // 厂家
      vendorOptions: [],
      // 资源组
      groupOptions: [],
      // 系统下拉
      systemOptions: [],
    };
  },
  created() {
    this.getVendor();
    this.getList();
  },
  mounted() {
    this.$nextTick(() => {
      this.tableMaxHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 50 - 30 - 48 + 'px'
    })
  },
  methods: {
    // 点击 新增资源
    addRe() {
      this.$refs.updateDialog.show({type: 'add'})
    },
    successBack() {
      this.getList()
    },
    // 获取列表
    getList(val) {
      get_getResourceByPage({
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        resName: this.searchData.resName || null,
        groupId: this.searchData.groupId || null,
        resOnline: this.searchData.resOnline || null,
        resType: this.searchData.resType || null,
        resOptsys: this.searchData.resOptsys || null,
        menuId: this.$route.meta.id
      }).then((res) => {
        let {data, auth} = res.data;
        this.auth = auth
        if (data.records.length === 0 && this.pageNum > 1) {
          this.pageNum--;
          this.getList();
        }
        data.records.forEach((item) => {
          this.$set(item, "isHover", false);
          const ResType = {0: "服务器资源", 1: "硬件资源", 2: "其他"};
          item.resType = Number(item.resType)
          item.resTypeName = ResType[item.resType];
          item.resOnline = Number(item.resOnline)
          item.resOnlineName = item.resOnline === 0 ? "在线" : "离线"
          item.groupName = item.rgroup.groupName;
          item.vendorName = item.vendor.vendorName;
          item.systemName = item.psystem.systemName;
          if (item.addTime) {
            item.addTime = this.$moment(item.addTime).format("YYYY-MM-DD HH:mm:ss");
          }
          if (item.editTime) {
            item.editTime = this.$moment(item.editTime).format("YYYY-MM-DD HH:mm:ss");
          }
        });

        this.tableData = data.records;
        this.total = data.total;
      });
    },
    // 搜索
    search() {
      this.getList()
    },
    searchKey: debounce(function () {
      this.getList()
    }, 100),
    // 获取厂家与资源组
    getVendor() {
      get_VendorList().then((res) => {
        let {data} = res.data;
        this.vendorOptions = []
        for (const key in data) {
          this.vendorOptions.push({value: key, label: data[key]});
        }
      });
      get_getResourceGroup().then((res) => {
        this.groupOptions = res.data.data;
      });
      //系统下拉
      get_getSystem().then((res) => {
        this.systemOptions = res.data.data;
      });
    },
    // 编辑
    edi(row) {
      this.$refs.updateDialog.show({type: 'edit', data: row})
    },
    // 删除
    del(row) {
      this.$confirm("此操作将永久删除选择资源, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
        confirmButtonClass: 'el-button--danger'
      }).then(() => {
        put_delResource({id: row.id}).then((res) => {
          let {code, msg} = res.data;
          this.getList();
          this.$message.success(msg);
        });
      }).catch(() => {

      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getList();
    }
  }
};
</script>

<style lang="less" scoped>
  .management {
    height: 100%;
    width: 100%;

    .t-content {
      width: 100%;
      padding: 15px;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);

      .search-top-bar {
        width: 100%;

        .title-group {
          display: flex;
          align-items: center;
        }
      }
    }
  }
</style>
